<template>
    <div class="container">
        <div class="headTitle">
            <div class="icons" @click="backTo">
                <span class="iconfont">&#xe799;</span>
            </div>
            <div class="titles">设置</div>
            <div class="introduction"></div>
        </div>
        <div class="miancontnets">
<!--            滑动启用关闭的项目-->
            <div class="firstSettings" v-for="items in slideItems">
                <div class="settingtitles">{{items.title}}</div>
                <div class="slideItems">
                    <el-switch
                        v-model="items.value">
                    </el-switch>
                </div>
            </div>
        </div>
        <div class="hint">
            <span class="hintContent">开启后，在设定时间内收到信息时不会响铃或振动提醒</span>
        </div>
<!--        关于裹裹及其下面的路由式选项-->
        <div class="mainItems">
<!--            关于裹裹+菜鸟裹裹使用条款+检查更新-->
            <div class="mainItems-one">
                <div class="part" v-for="items in mianItems">
                    <div class="part-title">{{items.title}}</div>
                    <div class="part-to">
                        <span>{{items.extraIntroduce}}</span>
                        <div id="spe">
                            <span class="iconfont">&#xe799;</span>
                        </div>
                    </div>
                </div>
            </div>
<!--            隐私+裹然喜欢权限设置-->
            <div class="mainItems-two">
                <div class="two-part" v-for="items in enabaleItems">
                    <div class="part">
                        <div class="part-title">{{items.title}}</div>
                        <div class="part-to" style="transform: rotate(180deg)">
                            <span class="iconfont">&#xe799;</span>
                        </div>
                    </div>
                </div>
            </div>
<!--            注销账户-->
            <div class="mainItems-three">
                <div class="three-part">
                    <div class="part">
                        <div class="part-title">{{logout}}</div>
                        <div class="part-to" style="transform: rotate(180deg)">
                            <span class="iconfont">&#xe799;</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!--        退出登录-->
        <div class="loginOut" @click="loginOut">
            <span>退出登录</span>
        </div>
<!--        退出登录提示警告-->
        <div class="alertForLogout" v-if="isShow">
<!--            灰色背景-->
            <div class="background"></div>
                <div class="alertBox">
                    <div class="alertBox-title">注销</div>
                    <div class="alertBox-ask">您确定要退出吗？</div>
                    <div class="alertBox-choices">
                        <div class="no" @click="cancel">取消</div>
                        <div class="yse" @click="signOut()">确定</div>
                    </div>
                </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "settings",
    methods:{
        backTo(){
            this.$router.go(-1);
        },
        cancel(){
            this.isShow=false;
        },
        loginOut(){
            this.isShow=true
        },
        signOut() {
            window.sessionStorage.clear();
            this.$router.push('/login');
        }
    },
    created() {
        let uname = window.sessionStorage.getItem('uname');
        if (uname == null) {
            this.$router.push('/login');
        }
    },
    data() {
        return {
            slideItems:[
                {
                    title:'夜间免打扰(22：00-8：00)',
                    value:true
                },
                {
                    title:'系统通知栏开关',
                    value:true
                },
                {
                    title:'Wi-Fi网络自动下载最新安装包',
                    value:true
                }
            ],
            mianItems:[
                {
                    title:'关于裹裹',
                    extraIntroduce:''
                },
                {
                    title:'菜鸟裹裹使用条款',
                    extraIntroduce:''
                },
                {
                    title:'检查更新',
                    extraIntroduce:'目前是最新版'
                }
            ],
            enabaleItems:[
                {
                    title:'隐私',
                },
                {
                    title: '裹然喜欢权限设置'
                }
            ],
            logout:'注销账户',
            isShow:false
        }
    }
}
</script>

<style lang="scss" scoped>
    /*引入图标*/
    @import url("../../../assets/userIconFont/iconfont.css");
    .container{
        .headTitle{
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            margin-bottom: 5px;
            .icons{
                span{
                    font-size: 40px;
                    color: #8590a6;
                }
            }
            .titles{
                font-size: 35px;
            }
        }
        .miancontnets{
            .firstSettings{
                background-color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px 20px;
                .settingtitles{
                    font-size: 30px;
                }
            }
        }
        .hint{
            margin: 20px;
            .hintContent{
                font-size: 30px;
                color: grey;
                letter-spacing: 2px;
            }
        }
        .mainItems{
            &-one,&-two,&-three{
                margin: 20px 0;
                background-color: white;
            }
            .part{
                display: flex;
                justify-content: space-between;
                padding: 10px;
                color: #979797;
                &-title{
                    font-size: 30px;
                }
                &-to{
                    span:nth-child(1){
                        transform: rotate(180deg);
                        font-size: 20px;
                        margin: 0 10px;
                    }
                }
            }
        }
        .loginOut{
            text-align: center;
            background-color: white;
            padding: 20px;
            font-size: 30px;
        }
        .alertForLogout{
            .background{
                position:absolute;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: #4f4f4f;
                opacity: 0.9;
            }
            .alertBox{
                transition: all 1s;
                width: 80%;
                background-color: white;
                position: fixed;
                top:50%;
                left:50%;
                transform:translateX(-50%) translateY(-50%);
                text-align: center;
                border-radius: 30px;
                &-title{
                    font-size: 40px;
                    font-weight: bolder;
                    margin: 10px;
                }
                &-ask{
                    font-size: 30px;
                    margin: 30px;
                }
                &-choices{
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    margin: 30px;
                    .no{
                        font-size: 30px;
                        color: #0072ff;
                        background-color: #a4daef;
                        padding: 10px 70px;
                        border-radius: 30px;
                    }
                    .yse{
                        font-size: 30px;
                        color: white;
                        background-color: #0072ff;
                        padding: 10px 50px;
                        border-radius: 30px;
                    }
                }
            }
        }
        #spe{
            display: inline-block;
            transform: rotate(180deg);
        }
    }
</style>